<template>
  <!-- <el-header> -->
  <!-- <div class="el-header"> -->
  <el-row>
    <el-col :span="12" class="text-left">
      <span class="hidden-xs-only">教育部智慧后勤综合服务管理平台</span>
    </el-col>
    <el-col class="top-right" :span="12">
      <el-dropdown @command="handleCommand">
        <div class="el-dropdown-link">
          <el-avatar class="avatar" :size="40" :src="squareUrl"></el-avatar>
          <span>{{username}}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>{{username}}</el-dropdown-item>
            <el-dropdown-item divided>修改密码</el-dropdown-item>
            <el-dropdown-item divided command="gologin">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
  <!-- </div> -->
  <!-- </el-header> -->
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import https from "@/common/api";
import router from "@/router";

const squareUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const username = ref(localStorage.getItem("usernameB"));
// 退出登录
function handleCommand(command: any) {
  console.log(command);
  if (command === "gologin") {
    https.logout({}).then((res) => {
      localStorage.clear();
      sessionStorage.clear();
      router.push({
        path: "/login",
      });
    });
  }
}
</script>

<style scoped lang="scss">
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-right {
  text-align: right;
  .el-dropdown {
    height: 60px;
    line-height: 60px;
    color: #fefefe;
    .avatar {
      float: left;
      margin: 10px 10px 0 0;
    }
  }
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>